<template>
	<view>
		<view class="fill">
			<image v-if="info.thumb" :src="info.thumb" mode="widthFix" class="bg"></image>
			<image v-else src="https://img.jinghushi.com/images/9/2024/09/zjw5rUCMer9r9R5rZ9m3966EQ9uZU3.png" mode="widthFix" class="bg"></image>
			<view class="f_position" :class="{'search_fixed':isFixed}">
				<uni-icons type="back" size="28" color="#333" @click="$navBack()"></uni-icons>
				<view class="search">
					<uni-search-bar radius="30" bgColor="#FFFFFF" v-model="keywords" placeholder="搜索您想要的商品" clearButton="auto" cancelButton="none" @confirm="searchTap" />
				</view>
			</view>
		</view>
		<view class="sp_content" id="page_wp">
			<view>
				<view class="sp_tip" :class="{'nav_pos':isFixed}">
					<view><image :src="'/static/special/'+color+'1.png'" mode="widthFix"></image><text>品类全</text></view>
					<view><image :src="'/static/special/'+color+'2.png'" mode="widthFix"></image><text>货品多</text></view>
					<view><image :src="'/static/special/'+color+'3.png'" mode="widthFix"></image><text>实惠价</text></view>
					<view><image :src="'/static/special/'+color+'4.png'" mode="widthFix"></image><text>送货快</text></view>
				</view>
			</view>
			<view class="sp_list">
				<view class="sp_item" v-for="item in list" @click="$navTo('/pages/product/product?id='+item.id)">
					<image :src="item.thumb"></image>
					<view class="sp_info">
						<view class="clamp2">{{item.title}}</view>
						<view class="sp_butie">最高补贴{{Number(item.btrate)}}%</view>
						<view class="sp_des">
							<view class="sp_price">
								<text><text class="small">￥</text>{{Number(item.agentprice)}}<text v-if="item.hasoption==1" class="small">起</text></text>
								<text class="old">￥{{Number(item.productprice)}}</text>
							</view>
							<view class="sp_buy" :class="{'sp_red':color=='red','sp_green':color=='green','sp_purple':color=='purple'}">购买</view>
						</view>
					</view>
				</view>
			</view>
			<view class="empty_loading">
				<image v-if="isloading" src="/static/business/loading.gif"></image>
				<view v-if="ismore">到底了~</view>
			</view>
			</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				isFixed: false,
				list: [],
				page: 0,
				isloading: false,
				ismore: false,
				brandid: 0,
				menuIdx: 0,
				keywords: '',
				info: [],
				color: 'orange',
				mid: 0,
				code: ''
			};
		},
		onLoad(options) {
			if(options.mid){
				this.mid = options.mid;
			}
			if (options.scene) {
				this.mid = options.scene;
			}
			uni.setStorageSync('mid', this.mid);
			if(options.code) this.code = options.code;
			if(!uni.getStorageSync('token')){
				this.getToken();
			}
			this.brandid = options.brandid
			if(options.color){
				this.color = options.color;
			}
			this.getClass();
		},
		onPageScroll() {
			let query = uni.createSelectorQuery().in(this);
			query.select('#page_wp').boundingClientRect(data => {
				this.isFixed = data.top <= 0 ? true : false;
			}).exec();
		},
		onReachBottom() {
			this.getList();
		},
		methods: {
			toHome(){
				this.$navTo('/pages/mallHome/selfMall');
			},
			getUserInfo(){
				this.$axios('Center/main', "POST", 'member').then(res => {
					if (res.data.code == 200) {
						this.$store.commit('uplevel', res.data.data.levelname);
						uni.setStorageSync('level',res.data.data.levelname);
					}
				})
			},
			getToken(){
				/*#ifdef H5*/
				this.$axios('login/autoGzlogin','POST','member',{
					mid: this.mid,
					code: this.code,
				}).then(res=>{
					if(res.data.code == 300001){
						this.$navTo(res.data.data);
					}else if(res.data.code == 200){
						uni.setStorageSync('token', res.data.data);
						uni.setStorageSync('Jh_recotabshops', 1);
						this.getUserInfo();
						this.getSharePath();
					}
				})
				/*#endif*/
				/*#ifndef H5*/
				uni.login({
					provider: 'weixin',
					success:res=> {
						this.$axios('login/autologin','POST','member',{
							mid: this.mid,
							code: res.code
						}).then(res=>{
							if(res.data.code == 200){
								uni.setStorageSync('token', res.data.data);
								uni.setStorageSync('Jh_recotabshops', 1);
								this.getUserInfo();
								this.getSharePath();
							}
						})
					}
				})
				/*#endif*/
			},
			getClass() {
				this.$axios('home/homeclass', 'POST', 'shop', {
					brandid: this.brandid
					// brandid: 3144
				}).then(res => {
					if (res.data.code == 200) {
						this.classList = res.data.data;
						if (this.classList.length > 0) {
							this.info = this.classList[0];
							this.menuIdx = this.menuIdx ? this.menuIdx : this.classList[0].id;
							this.getList();
						}
					}
				})
			},
			getList() {
				this.isloading = true;
				this.page++;
				this.$axios('home/homegoods', 'POST', 'shop', {
					id: this.menuIdx,
					page: this.page,
					brandid:this.brandid,
					// brandid:3148
				}).then(res => {
					this.isloading = false;
					if (res.data.code == 200) {
						let data = res.data.data;
						this.list = [...this.list, ...data];
						this.ismore = data.length<=0;
					}
				})
			},
			searchTap() {
				if (this.keywords === '') {
					this.$api.msg('请输入搜索内容！');
					return;
				}
				this.menuIdx = '';
				this.page = 0;
				this.list = [];
				this.searchList();
			},
			// 搜索或者商品列表都可以，ccate 二级分类，pcate一级分类
			searchList() {
				this.isloading = true;
				this.isempty = false;
				this.page++;
				this.$axios('Lists/index', 'POST', 'shop', {
					keywords: this.keywords,
					page: this.page,
					ccate:this.brandid
				}).then(res => {
					this.isloading = false;
					if (res.data.code == 200) {
						let data = res.data.data.goods;
						this.list = [...this.list, ...data];
						this.ismore = data.length<=0;
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	page{
		background: #FBF7FE;
		padding-bottom: 60rpx;
	}
	.fill{
		position: relative;
		.bg{
			width: 100%;
			height: 100%;
			// position: absolute;
			// top: 0;
		}
		.f_position{
			text-align: center;
			width: 100%;
			padding: 20rpx;
			display: flex;
			position: absolute;
			top: 0;
			align-items: center;
			margin-top: calc(var(--status-bar-height) + 24rpx);
			.search{
				width: 400rpx;
				left: 0;
				transition: all 0.5s; 
				margin-left: 14rpx;
				.uni-searchbar{
					padding: 0!important;
				}
				.uni-searchbar__box{
					height: 30px!important;
					justify-content: flex-start;
				}
				.uni-searchbar__box-search-input{
					text-align: left;
				}
				.searchInput{
					background: #fff;
					color: #999;
					height: 60rpx;
					border-radius: 30rpx;
					display: flex;
					align-items: center;
					width: 100%;
					justify-content: center;
					text{
						margin-left: 12rpx;
					}
				}
			}
		}
		.search_fixed{
			position: fixed;
			top: 0;
			// width: 100%;
			z-index: 999;
			padding-top: calc(var(--status-bar-height) + 30rpx);
			background: #F0E1FF;
			margin-top: 0;
		}
	}

	.sp_content{
		width: 100%;
		background: #FBF7FE;
		border-radius: 24rpx 24rpx 0rpx 0rpx;
		padding: 30rpx;
		position: relative;
		margin-top: -26rpx;
		.sp_tip{
			display: flex;
			align-items: center;
			justify-content: center;
			font-weight: 600;
			view{
				display: flex;
				align-items: center;
				margin: 0 10rpx;
				text{
					line-height: 1;
				}
			}
			image{
				width: 29rpx;
				margin-right: 10rpx;
			}
		}
		.sp_list{
			.sp_item{
				width: 100%;
				background: #FFFFFF;
				border-radius: 12rpx;
				padding: 10rpx;
				display: flex;
				justify-content: space-between;
				margin-top: 20rpx;
				image{
					width: 200rpx;
					height: 200rpx;
					border-radius: 12rpx;
				}
				.sp_info{
					width: calc(100% - 180rpx);
					padding-left: 20rpx;
					display: flex;
					flex-direction: column;
					justify-content: space-between;
					color: #333333;
					.sp_butie{
						font-size: 22rpx;
						color: #8615E1;
						margin-top: 8rpx;
					}
					.sp_des{
						display: flex;
						align-items: center;
						justify-content: space-between;
						// padding-bottom: 6rpx;
						.sp_price{
							color: #AF141D;
							// font-weight: 600;
							font-size: 40rpx;
							.small{
								font-size: 24rpx;
							}
							.old{
								color: #999999;
								font-size: 20rpx;
								text-decoration: line-through;
								font-weight: normal;
								margin-left: 14rpx;
							}
						}
						.sp_buy{
							width: 168rpx;
							line-height: 66rpx;
							background: linear-gradient( 90deg, #FFBF7C 0%, #FF9021 100%);
							border-radius: 33rpx;
							color: #FFFFFF;
							font-weight: 600;
							text-align: center;
						}
						.sp_red{
							background: linear-gradient( 90deg, #FC8B82 0%, #F92C42 100%);
						}
						.sp_green{
							background: linear-gradient( 90deg, #24B664 0%, #2F8220 100%);
						}
						.sp_purple{
							background: linear-gradient( 90deg, #BC5AF4 0%, #8528BA 100%);
						}
					}
				}
			}
		}
	}
	.nav_pos {
		background: #F0E1FF;
	    position: fixed;
	    // margin: 20rpx 0;
	    top: 0;
	    padding-top: calc(var(--status-bar-height) + 124rpx);
	    width: 100%;
	    z-index: 900;
	    padding-bottom: 20rpx;
		left: 0;
	}
</style>
